import { Button, Form, Input } from 'react-vant';
import './Login.css';
import { useEffect, useState } from 'react';
import { useAppDispatch } from '../../hooks/storeHooks';
import { login } from '../../utils/redux/slices/authSlice';
import { promptResult } from '@/utils/common';

const Login: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const dispatch = useAppDispatch();

  useEffect(() => {
    form.setFieldsValue({ account: '12345678909', password: '123456' });
  }, []);

  const onFinish = (values: any) => {
    promptResult(dispatch(login(values)), setLoading);
  };

  const handleLogin = () => {
    form.submit();
  };

  return (
    <div className="login-container">
      <div className="login-image"></div>
      <div className="login-form">
        <Form
          colon
          labelAlign="right"
          form={form}
          onFinish={onFinish}
          footer={
            <div className="login-btn-box">
              <Button
                type="primary"
                block
                round
                loading={loading}
                loadingType="spinner"
                loadingText="登录中..."
                onClick={handleLogin}
              >
                登录
              </Button>
            </div>
          }
        >
          <div className="login-title">欢迎来到极简美食街</div>
          <div className="login-item">
            <Form.Item
              label="账号"
              name="account"
              labelWidth="40px"
              rules={[{ required: true, message: '请输入账号' }]}
            >
              <Input placeholder="请输入账号" />
            </Form.Item>
          </div>
          <div className="login-item">
            <Form.Item
              label="密码"
              name="password"
              labelWidth="40px"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input placeholder="请输入密码" type="password" />
            </Form.Item>
          </div>
        </Form>
      </div>
    </div>
  );
};

export default Login;
